<template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card shadow="never">
                <div class="top">
                    <top-form @render="render($event)"></top-form>
                </div>

                <div class="center">
                    <el-radio-group v-model="navState" size="medium">
                        <el-radio-button label="-1">全 部</el-radio-button>
                        <el-radio-button label="0">待审核</el-radio-button>
                        <el-radio-button label="1">已审核</el-radio-button>
                        <el-radio-button label="2">已拒绝</el-radio-button>
                    </el-radio-group>
                    <el-alert
                        :title="`共有 ${total} 条数据`"
                        type="info"
                        :closable="false"
                        show-icon>
                    </el-alert>
                </div>

                <div class="bottom">
                    <template>
                        <el-table
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column
                                prop="number"
                                min-width="150px"
                                label="编号">
                            </el-table-column>
                            <el-table-column
                                prop="subject"
                                min-width="60px"
                                label="学科">
                            </el-table-column>
                            <el-table-column
                                prop="catalog"
                                min-width="100px"
                                label="目录">
                            </el-table-column>
                            <el-table-column
                                prop="questionType"
                                min-width="60px"
                                label="题型">
                                <template v-slot="scope">
                                    {{ questionType(scope.row.questionType) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="question"
                                min-width="180px"
                                label="题干">
                                <template v-slot="scope">
                                    {{ formatting(scope.row.question) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="difficulty"
                                min-width="60px"
                                label="难度">
                                <template v-slot="scope">
                                    {{ difficulty(scope.row.difficulty) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="creator"
                                min-width="100px"
                                label="录入人">
                            </el-table-column>
                            <el-table-column
                                prop="addDate"
                                min-width="150px"
                                label="录入时间">
                                <template v-slot="scope">
                                    {{ timeFormat(scope.row.addDate) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="chkUser"
                                min-width="100px"
                                label="审核人">
                            </el-table-column>
                            <el-table-column
                                prop="chkRemarks"
                                min-width="150px"
                                label="审核意见">
                            </el-table-column>
                            <el-table-column
                                prop="chkState"
                                min-width="80px"
                                label="审核状态">
                                <template v-slot="scope">
                                    {{ chkState(scope.row.chkState) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="publishState"
                                min-width="80px"
                                label="发布状态">
                                <template v-slot="scope">
                                    {{ publishState(scope.row.chkState, scope.row.publishState) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="190">
                                <template v-slot="scope">
                                    <el-button @click="openDialog(scope.row.id, 1)" size="small" type="text">预览</el-button>
                                    <el-button @click="edit(scope.row.id)" size="small" type="text">修改</el-button>

                                    <el-button @click="openDialog(scope.row.id, 2)" size="small" type="text"
                                               :disabled="!(scope.row.chkState === 0)">审核
                                    </el-button>
                                    <el-button @click="publish(scope.row.id, scope.row.publishState)" size="small" type="text"
                                               :disabled="!(scope.row.chkState === 1)">
                                        {{ scope.row.chkState === 1 && scope.row.publishState === 1 ? '下架' : '上架' }}
                                    </el-button>

                                    <el-button @click="remove(scope.row.id)" size="small" type="text">移出</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="footer">
                            <el-pagination
                                background
                                @size-change="sizeChange"
                                @current-change="currentChange"
                                :current-page="page"
                                :page-sizes="[5, 10, 20, 50]"
                                :page-size="5"
                                layout="prev, pager, next, sizes, jumper"
                                :total="total">
                            </el-pagination>
                        </div>
                    </template>
                </div>
            </el-card>
        </div>

        <view-dialog v-model="showDialog" :currentID="currentID"></view-dialog>

        <el-dialog
            title="题目审核"
            :visible.sync="showChkDialog"
            width="500px">
            <el-form ref="chkForm" :model="chkForm" :rules="rules" label-width="80px">
                <el-form-item label="审核通过">
                    <el-switch
                        v-model="chkForm.chkState"
                        active-value="1"
                        inactive-value="0"
                        active-color="#409EFF"
                        inactive-color="#DCDFE6">
                    </el-switch>
                </el-form-item>
                <el-form-item label="审核意见" prop="chkRemarks">
                    <el-input type="textarea" v-model="chkForm.chkRemarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showChkDialog = false">取 消</el-button>
                <el-button type="primary" @click="getChk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { setChoiceChk, getChoiceList, setChoicePublish, setQuestionChoice } from '@/api/hmmm/questions'
import dayjs from "dayjs"

export default {
    created () {
        this.render(this.form)
    },
    data () {
        return {
            showDialog: false,
            showChkDialog: false,
            form: {},
            chkForm: {},
            rules: {
                chkRemarks: [
                    { required: true, message: '请输入审核意见', trigger: 'blur' }
                ]
            },
            currentID: 0,
            tableData: [],
            navState: -1,
            btnChkState: 0,
            btnPublishState: 0,
            page: 1,
            pageSize: 5,
            total: 0,
        }
    },
    watch: {
        navState() {
            this.render(this.form)
        }
    },
    methods: {
        async render (data) {
            if (Object.keys(data).length !== 0) this.page = 1
            this.form = data
            const res = await getChoiceList({
                ...data,
                chkState: this.navState >= 0 ? this.navState : undefined,
                page: this.page,
                pagesize: this.pageSize
            })
            this.tableData = res.data.items
            this.total = res.data.counts
        },
        openDialog (id, type) {
            if (type === 1) {
                this.showDialog = true
            } else {
                this.showChkDialog = true
            }
            this.currentID = id
        },
        edit (id) {
            this.$router.push({
                path: '/questions/new',
                query: {
                    id: id
                }
            })
        },
        getChk () {
            this.$refs.chkForm.validate(async valid => {
                if (valid) {
                    const res = await setChoiceChk({
                        id: this.currentID,
                        chkState: +this.chkForm.chkState,
                        chkRemarks: this.chkForm.chkRemarks
                    })
                    if (res.data.success) {
                        this.$message.success('审核完成')
                        this.chkForm = {}
                        await this.render(this.form)
                        this.showChkDialog = false
                    }
                }
            })
        },
        publish (id, publishState) {
            const messageArr = ['上架', '下架']
            this.$confirm(`您确定要${publishState === 0 ? messageArr[0] : messageArr[1]}这道题目吗`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await setChoicePublish({
                    id: id,
                    publishState: publishState === 0 ? 1 : 0
                })
                if (res.data.success) {
                    this.$message.success(`${publishState === 0 ? messageArr[0] : messageArr[1]}成功`)
                    await this.render(this.form)
                }
            }).catch(() => {});
        },
        remove (id) {
            this.$confirm('确定要将此题目移出精选题库，返回到基础题库吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await setQuestionChoice({
                    id: id,
                    choiceState: 0
                })
                if (res.data.success) {
                    this.$message.success('移出成功')
                    if (this.tableData.length === 1 && this.page > 1) this.page--
                    await this.render(this.form)
                }
            }).catch(() => {});
        },
        questionType (type) {
            if (type === '1') return '单选'
            if (type === '2') return '多选'
            if (type === '3') return '简答'
        },
        formatting (content) {
            const reg = /<[^>]+>/g
            return content.replace(reg, '')
        },
        difficulty (type) {
            if (type === '1') return '简单'
            if (type === '2') return '一般'
            if (type === '3') return '困难'
        },
        timeFormat (time) {
            const obj = new dayjs(time)
            return obj.format('YYYY-MM-DD HH:mm:ss')
        },
        chkState (state) {
            const arr = ['待审核', '已审核', '已拒绝']
            return arr[state]
        },
        publishState (state1, state2) {
            const arr = ['未发布', '待发布', '已下架', '已发布']
            if (state2 === 0) {
                return arr[state1]
            } else {
                return arr[3]
            }
        },
        sizeChange (val) {
            this.pageSize = val
            this.page = 1
            this.render(this.form)
        },
        currentChange (val) {
            this.page = val
            this.render(this.form)
        }
    }
}
</script>

<style scoped lang="scss">
.dashboard-container {
    .app-container {
        padding: 5px 10px;

        .center {
            padding-bottom: 16px;

            .el-radio-group {
                margin-bottom: 16px;
            }
        }

        .bottom {
            ::v-deep .el-table {
                border-top: 1px solid #EBEEF5;
                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;

                thead tr {
                    th:nth-of-type(13) {
                        text-align: center;
                    }
                }

                .cell {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                }
            }

            .footer {
                display: flex;
                justify-content: end;

                .el-pagination {
                    padding: 20px 0;

                    ::v-deep .el-pagination__jump {
                        margin-left: -5px;
                    }
                }
            }
        }
    }

    ::v-deep .el-dialog {
        .el-dialog__body {
            padding: 24px 30px 0;
        }

        .el-dialog__footer {
            padding: 10px 30px 34px;
        }
    }
}
</style>
